<template>
  <el-aside id="message">
    <div class="message_box">
      <ul class="msg-cont">
        <li v-for="item in getNewMsg" v-bind:class="{ 'msg-cont-send' : item.type == 'send' }">
          <span class="msg-cont-item">{{item.userName}}: {{item.cont}}</span>
        </li>
      </ul>
    </div>
    <el-form :inline="true" :model="formInput">
      <el-form-item label>
        <el-input v-model="formInput.content" placeholder></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发言</el-button>
      </el-form-item>
    </el-form>
  </el-aside>
</template>
<script>
import { getBusCxt } from "../../store";
import { mapGetters } from "vuex";
import { Keys } from "../../uitls";
let recKey = Keys.GETNEWMSG;
export default {
  data() {
    return {
      formInput: {
        content: ""
      }
    };
  },
  computed: {
    ...mapGetters([recKey])
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      console.log(getBusCxt());
      let msg = { cont: this.formInput.content };
      getBusCxt().msgCxt.sendMsg(msg);
    }
  }
};
</script>
<style lang="scss">
#message {
  height: 100%;
  background: yellowgreen;
  box-sizing: border-box;
  .message_box {
    height: calc(100vh - 61px);
    width: 100%;
    background: olivedrab;
    overflow-y: scroll;
  }
  .el-form {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    .el-form-item {
      margin: 10px;
    }
  }
}
.msg-cont {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.msg-cont > li {
  margin: 0px;
  padding: 5px;
}
.msg-cont-item {
  background: #8492a6;
  padding: 5px 10px;
  border-radius: 2px;
}
.msg-cont-receive {
  text-align: left;
}
.msg-cont-send {
  text-align: right;
}
</style>
